<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<div>
				<span>文章列表</span>
			</div>
			<div class="search">
				<el-input v-model="select_keyword" placeholder="请输入文章标题关键词："></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
			</div>
		</div>
		<el-table :data="tableData">
			<el-table-column prop="article_id" label="#" width="50"></el-table-column>
			<el-table-column prop="cate_1st_name" label="一级分类"></el-table-column>
			<el-table-column prop="cate_2nd_name" label="二级分类"></el-table-column>
			<el-table-column label="主题">
				<template slot-scope="scope">
					<el-image style="width: 100px; height:65px" :src="scope.row.main_photo"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="title" label="标题" width="220"></el-table-column>
			<el-table-column prop="tag" label="标签" width="250">
				<template slot-scope="scope">
					<el-tag type="success" v-for="(item, index) in scope.row.tags" :key="index">{{ item.tag_name }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="create_time" label="发布日期" width="90"></el-table-column>
			<el-table-column prop="update_time" label="更新日期" width="90"></el-table-column>
			<el-table-column label="操作" width="220">
				<!-- 复杂结构的固定写法：slot-scope="scope" -->
				<template slot-scope="scope">
					<div class="button_top">
						<el-link :href="`#/article/edit/${scope.row.article_id}`" class="edit-link" :underline="false">
							<el-button v-permission="'article:list:edit'" type="primary" plain icon="el-icon-edit"
								class="edit-button">编辑</el-button>
						</el-link>
						<el-button v-permission="'article:list:tag'" type="success" plain icon="el-icon-collection-tag"
							@click="openLabel(scope.row)">标记
						</el-button>
					</div>
					<div class="button_bottom">
						<el-button type="warning" v-permission="'article:list:audit'" plain
							icon="el-icon-collection-tag">审核</el-button>
						<el-button v-permission="'article:list:remove'" type="danger" plain icon="el-icon-delete"
							@click="handleRemove(scope.row.article_id, scope.$index)">删除</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<div class="page">
			<el-pagination background layout="total, prev, pager, next" :current-page="currentPage" :page-count="total_num"
				@current-change="handleSwitch" :total="total" :page-size="page_num">
			</el-pagination>
		</div>

		<!-- 标签功能 -->
		<el-dialog title="标记文章" :visible.sync="dialogVisible">
			<div class="search">
				<div>您可以添加多个标签：</div>
				<div>
					<div style="display: flex;">
						<el-input placeholder="找不到标签？在此处搜索" class="input-with-select" style="margin-right: 10px;">
							<el-button slot="append" icon="el-icon-search"></el-button>
						</el-input>
						<el-button type="success" icon="el-icon-circle-plus-outline">创建标签</el-button>
					</div>
				</div>
			</div>
			<div class="tag-input">
				<el-tag v-for="item in selected_tags" :key="item.tag_id" closable type="success" effect="dark"
					@close="handleCloseTag(item)">
					{{ item.tag_name }}
				</el-tag>
			</div>
			<div class="tag-bottom">
				<el-tag type="success" v-for="(item, index) in total_tags" :key="index" @click="handlePush(item)">
					{{ item.tag_name }}
				</el-tag>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="success" plain @click="dialogVisible = false">取 消</el-button>
				<el-button type="success" @click="handleSave">保存</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
import { Article } from '@/api';
import { Tag } from "@/api";
export default {
	name: 'List',
	data() {
		return {
			tableData: [],
			dialogVisible: false,
			total_tags: [],
			selected_tags: [],
			current_id: '',
			page_num: 5,
			total_num: 0,
			currentPage: 1,
			total: null,
			select_keyword: '',
		}
	},
	// 在created或mounted发送ajax请求(通过调用函数)
	created() {
		this.loadList();
	},
	methods: {
		// 一般将发送AJAX写到methods中
		// 加载列表
		async loadList() {
			let { status, msg, data, total } = await Article.list({ pagesize: 5 });
			if (status) {
				this.total = total;
				this.tableData = data;
				this.total_num = Math.ceil(total / this.page_num);
			} else {
				this.$message.error(msg);
			}
		},
		// 打开标签弹窗
		async openLabel(label) {
			this.current_id = label.article_id;
			// 通过拷贝数组，断开双向数据绑定
			this.selected_tags = [...label.tags];
			let { status, data } = await Tag.list();
			if (status) {
				this.total_tags = data;
			}
			this.dialogVisible = true;
		},
		// 删除选中的标签
		handleCloseTag(item) {
			this.selected_tags.splice(this.selected_tags.indexOf(item), 1);
		},
		// 添加标签
		handlePush(tag) {
			// 通过tag_id进行判断，是否存在
			if (!this.selected_tags.some(item => item.tag_id === tag.tag_id)) {
				this.selected_tags.push(tag);
			}
		},
		// 删除
		handleRemove(article_id, index) {
			this.$confirm('该操作将删除该文章, 是否继续?', '提示', { type: 'warning' })
				.then(async () => {
					let { status, msg } = await Article.remove({ article_id });
					if (status) {
						// 操作DOM
						this.tableData.splice(index, 1);
						// 信息提示
						this.$message.success(msg);
						// 重新获取
						this.loadList({ pagesize: 5 });
					} else {
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info("已取消该操作！");
				});
		},
		// 保存功能
		async handleSave() {
			let tagIds = this.selected_tags.map(tag => tag.tag_id);
			let { status, msg } = await Article.tag({ article_id: this.current_id, tags: tagIds });
			if (status) {
				let index = this.tableData.findIndex(item => item.article_id === this.current_id);
				if (index !== -1) {
					this.tableData[index].tags = [];
					Object.assign(this.tableData[index].tags, this.selected_tags);
				}
				this.$message.success(msg);
			}
			this.dialogVisible = false;
		},
		// 页码
		async handleSwitch(pageindex) {
			let { status, msg, data } = await Article.list({ pageindex, pagesize: 5 });
			if (status) {
				this.tableData = data;
			}
		},
		// 搜索功能
		async handleSearch() {
			let { status, msg, data, total } = await Article.list({ pagesize: 5, keyword: this.select_keyword });
			if (status) {
				this.total = total;
				this.tableData = data;
				this.total_num = Math.ceil(total / this.page_num);
			} else {
				this.$message.error(msg);
			}
		},
	},

}
</script>

<style lang="less" scoped>
.clearfix {
	display: flex;
	justify-content: space-between;
}

.button_top {
	margin-bottom: 10px;

	a {
		margin-right: 10px;
	}
}

.search {
	display: flex;
	justify-content: space-between;
	align-items: center
}

.tag-input {
	width: 100%;
	height: 50px;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-top: 20px;
	display: flex;
	align-items: center;

	span {
		margin-left: 10px;
	}

}

.tag-bottom {
	margin-top: 20px;

	span {
		// padding: 10px;
		margin-right: 10px;
	}
}

.cell span {
	margin-right: 10px;
	margin-bottom: 10px;
}

.page {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.search {
	display: flex;

	.el-input {
		margin-right: 15px;
	}
}
</style>
